<template>
  <div style="background-color: white;">
    <el-form
      :model="ruleForm"
      ref="ruleForm"
      label-width="120px"
      class="demo-ruleForm"
      :rules="rules"
    >
      <el-row class="erow">
        <el-col :span="24" v-if="userInfo.usertype<3">
          <el-form-item label="机动车所有人" prop="companyId">
            <el-select v-model="ruleForm.companyId" filterable placeholder="请选择" style="width:100%">
              <el-option
                v-for="item in company"
                :key="item.id"
                :label="item.companyName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row class="erow">
        <el-col :span="6">
          <el-form-item label="车辆号码" prop="carCode">
            <el-input v-model="ruleForm.carCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌型号" prop="pinpai">
            <el-input v-model="ruleForm.pinpai "></el-input>
          </el-form-item>
          <!-- <el-form-item label="品牌型号" prop="carBrandId">
            <el-select v-model="ruleForm.carBrandId" placeholder="请选择品牌型号" style="width: 100%;"></el-select>
          </el-form-item>-->
        </el-col>
        <el-col :span="6">
          <el-form-item label="颜色" prop="carColorId">
            <el-select v-model="ruleForm.carColorId" placeholder="请选择车辆颜色" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in carColor"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="购置价格(万元)" prop="buyPrice">
            <el-input v-model="ruleForm.buyPrice" type="number"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow">
        <el-col :span="6">
          <el-form-item label="排气量(L)" prop="discharge">
            <el-input v-model="ruleForm.discharge" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="登记日期" prop="regDate">
            <el-date-picker
              type="datetime"
              placeholder="登记日期"
              value-format="yyyy-MM-dd HH:mm:ss"
              v-model="ruleForm.regDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="行驶里程" prop="goNum">
            <el-input v-model="ruleForm.goNum" type="number"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="使用性质" prop="useAttrId">
            <el-select v-model="ruleForm.useAttrId" placeholder="使用性质" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in useType"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow">
        <el-col :span="6">
          <el-form-item label="车架号" prop="fromCode">
            <el-input v-model="ruleForm.fromCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发动机号" prop="machineCode">
            <el-input v-model="ruleForm.machineCode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="保险日期" prop="baoXianDate">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="保险日期"
              v-model="ruleForm.baoXianDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="年审日期" prop="nianShenDate">
            <el-date-picker
              type="datetime"
              value-format="yyyy-MM-dd HH:mm:ss"
              placeholder="年审日期"
              v-model="ruleForm.nianShenDate"
              style="width: 100%;"
            ></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow">
        <el-col :span="6">
          <el-form-item label="车型" prop="carTypeId">
            <el-select v-model="ruleForm.carTypeId" placeholder="车型" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in carType"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="动力类型" prop="carClassId">
            <el-select v-model="ruleForm.carClassId" placeholder="动力类型" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in dongLiType"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="OBD代码" prop="obdcode">
            <el-input v-model="ruleForm.obdcode"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="座位数" prop="zuoWeiId">
            <el-select v-model="ruleForm.zuoWeiId" placeholder="座位数" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in zuoWeiNum"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow">
        <el-col :span="6">
          <el-form-item label="排放标准" prop="paiFangBiaoZhunId">
            <el-select v-model="ruleForm.paiFangBiaoZhunId" placeholder="排放标准" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in paiFang"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="经费来源" prop="priceFromId">
            <el-select v-model="ruleForm.priceFromId" placeholder="经费来源" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in jingFei"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="取得方式" prop="getTypeId">
            <el-select v-model="ruleForm.getTypeId" placeholder="取得方式" style="width: 100%;">
              <el-option
                :label="item.name"
                :value="item.id"
                v-for="(item, index) in getCarType"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <br />

      <br />
      <el-row class="erow">
        <el-col :span="24">
          <el-form-item label="备注信息" prop="remark">
            <el-input type="textarea" v-model="ruleForm.remark"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <br />
      <br />
      <br />
      <el-row>
        <el-col :span="24">
          <div class="grid-content bg-purple-dark" style="background-color: #F6F6F6;padding: 10px;">
            <b>电子文本信息</b>
          </div>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow">
        <el-col :span="4">
          <el-upload
            class="avatar-uploader"
            :action="webUploadUrl"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
            :show-file-list="false"
            :on-success="onSuccess1"
            :headers="{'Authorization':token}"
          >
            <img v-if="ruleForm.xszfileUrl" :src="ruleForm.xszfileUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <el-upload
            class="avatar-uploader"
            :action="webUploadUrl"
            :show-file-list="false"
            :on-success="onSuccess2"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
            :headers="{'Authorization':token}"
          >
            <img v-if="ruleForm.czzsfileUrl" :src="ruleForm.czzsfileUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <el-upload
            class="avatar-uploader"
            :action="webUploadUrl"
            :show-file-list="false"
            :on-success="onSuccess3"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
            :headers="{'Authorization':token}"
          >
            <img v-if="ruleForm.zckpfileUrl" :src="ruleForm.zckpfileUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <el-upload
            class="avatar-uploader"
            :action="webUploadUrl"
            :show-file-list="false"
            :on-success="onSuccess4"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
            :headers="{'Authorization':token}"
          >
            <img v-if="ruleForm.ysfpfileUrl" :src="ruleForm.ysfpfileUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <el-upload
            class="avatar-uploader"
            :action="webUploadUrl"
            :show-file-list="false"
            :on-success="onSuccess5"
            accept=".jpg, .jpeg, .png, .gif, .bmp, .JPG, .JPEG, .PBG, .GIF, .BMP"
            :headers="{'Authorization':token}"
          >
            <img v-if="ruleForm.bshfileUrl" :src="ruleForm.bshfileUrl" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
      <br />
      <el-row class="erow" style="text-align: center;">
        <el-col :span="4">
          <div class="grid-content bg-purple">行驶证(加盖公章)</div>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">产权证书(加盖公章)</div>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">资产卡片(加盖公章)</div>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">原始发票或调拨单(加盖公章)</div>
        </el-col>
        <el-col :span="1">&nbsp;</el-col>
        <el-col :span="4">
          <div class="grid-content bg-purple-light">标识化(加盖公章)</div>
        </el-col>
      </el-row>
      <br />
    </el-form>
    <br />
    <div slot="footer" class="dialog-footer">
      <el-col :span="21">&nbsp;</el-col>
      <el-button type="primary" @click="save" v-if="update == 0">保存数据</el-button>
      <el-button type="primary" @click="upsave(carId)" v-if="update == 1">保存数据</el-button>
    </div>
  </div>
</template>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  width: 100%;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
<script>
import { axios } from "@/api/axios";
import { mapGetters } from "vuex";

export default {
  computed: {
    ...mapGetters(["userInfo"]),
    ...mapGetters(["token"])
  },
  props: {
    carId: {
      type: Number,
      default: 0
    },
    update: {
      type: Number,
      default: 0
    }
  },
  data: function() {
    return {
      carinfo: {},
      src: "",
      //   update: 0,
      ruleForm: {
        carCode: "", //车牌号
        carBrandId: "", //品牌型号
        carTypeId: "", //
        // carModel: "", //车辆型号
        pinpai: "",
        carColorId: "", //车辆颜色
        buyPrice: "", //购置价格
        discharge: "", //排气量
        regDate: "", //登记日期
        goNum: "", //行驶里程
        useAttrId: "", //使用性质
        fromCode: "", //车架号
        machineCode: "", //发动机号
        baoXianDate: "", //保险日期
        nianShenDate: "", //年审日期
        carClassId: "", //动力类型id
        obdcode: "", //OBD代码
        zuoWeiId: "", //座位id
        paiFangBiaoZhunId: "", //排放标准
        priceFromId: "", //经费来源
        getTypeId: "", //取得方式
        carCardColorId: "", //车牌颜色
        carAreaId: "",
        companyId: "",
        remark: "",
        xszfileUrl: "",
        czzsfileUrl: "",
        zckpfileUrl: "",
        ysfpfileUrl: "",
        bshfileUrl: ""
      },
      rules: {
        carCode: [
          { required: true, message: "请输入车辆号码", trigger: "blur" }
        ],
        buyPrice: [{ required: true, message: "请输入价格", trigger: "blur" }],

        pinpai: [
          { required: true, message: "请输入品牌型号", trigger: "blur" }
        ],
        discharge: [
          { required: true, message: "请输入排气量", trigger: "blur" }
        ],
        regDate: [
          { required: true, message: "请选择登记日期", trigger: "change" }
        ],
        fromCode: [
          { required: true, message: "请输入车架号", trigger: "blur" }
        ],
        machineCode: [
          { required: true, message: "请输入发动机号", trigger: "blur" }
        ],
        useAttrId: [
          { required: true, message: "请选择使用性质", trigger: "change" }
        ],
        carColorId: [
          { required: true, message: "请选择车辆颜色", trigger: "change" }
        ],
        carClassId: [
          { required: true, message: "请选择动力类型", trigger: "change" }
        ],
        zuoWeiId: [
          { required: true, message: "请选择座位数", trigger: "change" }
        ],
        priceFromId: [
          { required: true, message: "请选择经费来源", trigger: "change" }
        ],
        getTypeId: [
          { required: true, message: "请选择取得方式", trigger: "change" }
        ],
        companyId: [
          { required: true, message: "请选择单位", trigger: "change" }
        ]
      },
      carColor: [],
      carType: [],
      cheLiangChanDi: [],
      chePaiType: [],
      dongLiType: [],
      getCarType: [],
      jingFei: [],
      paiFang: [],
      useType: [],
      zuoWeiNum: [],
      company: [],
      webUploadUrl: "" //文件上传地址
    };
  },
  methods: {
    getTypeInfo() {
      axios("/admin/car/viewJson.do", "get", {}).then(data => {
        this.carColor = data.carColor;
        this.carType = data.carType;
        this.cheLiangChanDi = data.cheLiangChanDi;
        this.chePaiType = data.chePaiType;
        this.dongLiType = data.dongLiType;
        this.getCarType = data.getCarType;
        this.jingFei = data.jingFei;
        this.paiFang = data.paiFang;
        this.useType = data.useType;
        this.zuoWeiNum = data.zuoWeiNum;
        this.company = data.companys;
        this.carType = data.carType;
      });
    },
    editinfo() {
      axios("/admin/car/findCar.do", "post", {
        carId: this.carId
      }).then(data => {
        this.ruleForm.id = data.car.id;
        this.ruleForm.carCode = data.car.carCode;
        this.ruleForm.carTypeId = data.car.carTypeId;
        // this.ruleForm.carBrandId = data.car.carBrandId;
        this.ruleForm.pinpai = data.car.pinpai;
        this.ruleForm.carModel = data.car.carModel;
        this.ruleForm.carColorId = data.car.carColorId;
        if (data.car.buyPrice) {
          this.ruleForm.buyPrice = parseFloat(data.car.buyPrice);
        } else {
          this.ruleForm.buyPrice = "";
        }
        this.ruleForm.discharge = data.car.discharge;
        this.ruleForm.regDate = data.car.regDate;
        this.ruleForm.goNum = data.car.goNum;
        this.ruleForm.useAttrId = data.car.useAttrId;
        this.ruleForm.fromCode = data.car.fromCode;
        this.ruleForm.machineCode = data.car.machineCode;
        this.ruleForm.baoXianDate = data.car.baoXianDate;
        this.ruleForm.nianShenDate = data.car.nianShenDate;
        this.ruleForm.carClassId = data.car.carClassId;
        this.ruleForm.obdcode = data.car.obdcode;
        this.ruleForm.zuoWeiId = data.car.zuoWeiId;
        this.ruleForm.paiFangBiaoZhunId = data.car.paiFangBiaoZhunId;
        this.ruleForm.priceFromId = data.car.priceFromId;
        this.ruleForm.getTypeId = data.car.getTypeId;
        this.ruleForm.carCardColorId = data.car.carCardColorId;
        this.ruleForm.carAreaId = data.car.carAreaId;

        this.ruleForm.xszfileUrl = data.car.xszfileUrl;
        this.ruleForm.czzsfileUrl = data.car.czzsfileUrl;
        this.ruleForm.zckpfileUrl = data.car.zckpfileUrl;
        this.ruleForm.ysfpfileUrl = data.car.ysfpfileUrl;
        this.ruleForm.bshfileUrl = data.car.bshfileUrl;
        if (this.userInfo.usertype == 3) {
          this.ruleForm.companyId = this.userInfo.comid;
        } else {
          this.ruleForm.companyId = data.car.companyId;
        }
        this.ruleForm.remark = data.car.remark;
      });
    },
    save() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // if (!this.ruleForm.xszfileUrl) {
          //   this.$message("请上传行驶证图片");
          //   return;
          // }
          // if (!this.ruleForm.czzsfileUrl) {
          //   this.$message("请上传产权证书图片");
          //   return;
          // }
          // if (!this.ruleForm.zckpfileUrl) {
          //   this.$message("请上传资产卡片图片");
          //   return;
          // }
          // if (!this.ruleForm.ysfpfileUrl) {
          //   this.$message("请上传原始发票或调拨单图片");
          //   return;
          // }
          // if (!this.ruleForm.bshfileUrl) {
          //   this.$message("请上传标识化图片");
          //   return;
          // }
          if (this.ruleForm.buyPrice) {
            this.ruleForm.buyPrice = parseFloat(this.ruleForm.buyPrice);
          } else {
            this.ruleForm.buyPrice = "";
          }
          var datas = this.ruleForm;
          axios("/admin/car/addCar.do", "post", datas).then(data => {
            console.log(data);
            if (data.error == 0) {
              this.$message({
                message: "添加成功",
                type: "success"
              });
              this.$emit("close2", data);
            } else if (data.errorMsg) {
              this.$message(data.errorMsg);
            } else {
              this.$message("添加失败");
            }
          });
        } else {
          console.log(valid);
          return false;
        }
      });
    },
    onSuccess1(file) {
      if (!file) return;
      if (file.error == 0) {
        this.ruleForm.xszfileUrl = this.VUE_APP_BASE_API + file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onSuccess2(file) {
      if (!file) return;
      if (file.error == 0) {
        this.ruleForm.czzsfileUrl = this.VUE_APP_BASE_API + file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onSuccess3(file) {
      if (!file) return;
      if (file.error == 0) {
        this.ruleForm.zckpfileUrl = this.VUE_APP_BASE_API + file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onSuccess4(file) {
      if (!file) return;
      if (file.error == 0) {
        this.ruleForm.ysfpfileUrl = this.VUE_APP_BASE_API + file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    onSuccess5(file) {
      if (!file) return;
      if (file.error == 0) {
        this.ruleForm.bshfileUrl = this.VUE_APP_BASE_API + file.url;
      } else {
        this.$message("上传失败，请重试");
      }
    },
    upsave() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          // if (!this.ruleForm.xszfileUrl) {
          //   this.$message("请上传行驶证图片");
          //   return;
          // }
          // if (!this.ruleForm.czzsfileUrl) {
          //   this.$message("请上传产权证书图片");
          //   return;
          // }
          // if (!this.ruleForm.zckpfileUrl) {
          //   this.$message("请上传资产卡片图片");
          //   return;
          // }
          // if (!this.ruleForm.ysfpfileUrl) {
          //   this.$message("请上传原始发票或调拨单图片");
          //   return;
          // }
          // if (!this.ruleForm.bshfileUrl) {
          //   this.$message("请上传标识化图片");
          //   return;
          // }
          var datas = this.ruleForm;
          console.log(datas);
          axios("/admin/car/changeCarById.do", "post", datas).then(data => {
            console.log(data);
            if (data.error == 0) {
              this.$message({
                message: "修改成功",
                type: "success"
              });
              this.$emit("close2");
            } else if (data.errorMsg) {
              this.$message(data.errorMsg);
            } else {
              this.$message("修改失败");
            }
          });
        } else {
          console.log(valid);
          return false;
        }
      });
    }
  },
  created() {
    this.webUploadUrl = this.VUE_APP_BASE_API + "/common/webupload.shtml";
    this.getTypeInfo();
    if (this.userInfo.usertype < 3) {
      this.ruleForm.companyId = this.userInfo.comid;
    }
    if (this.update == 1) {
      this.editinfo();
    }
  }
};
</script>